<template>
	<view class="content">
		<view class="top-logo-box flex-c-c">
			<image src="../static/logo.png" mode=""></image>
			<text>卡拉威高尔夫</text>
		</view>
		<view class="bottom-but-box flex-c-c">
			<view class="ok-login-box" v-if="!isGetUserInfo">
				<button @click="getUserProfile">点击登录</button>
			</view>
			<view class="ok-login-box" v-else>
				<button @click="show = true">获取手机号</button>
			</view>
			<view class="go-fh-box">
				<button @click="goReturn">取消登录</button>
			</view>
		</view>
		<view class="agreement" @click="isAgree = !isAgree">
			<image :src="`/static/icon_check${isAgree? 'ed': ''}.png`" mode=""></image>
			<!-- <image src="/static/icon_checked.png" mode=""></image> -->
			<view class="text">
				我已阅读并同意
				<text @click.stop="toAgreement">《用户隐私协议》</text>
			</view>
		</view>
		<u-popup v-model="show" mode="center" width="600" height="500" border-radius="20">
			<view class="u-popup-box">
				<view class="t-title-box f-30 text-center fw-bold">微信授权</view>
				<view class="c-info-box flex-c-c">
					<view class="t-icon-box mb-30">
						<image src="../../static/shop_icon/icon5.png" mode=""></image>
					</view>
					<view class="b-txt-box f-26 fw-bold">
						<text>卡拉威申请获取一下权限</text>
						<text>·申请获取你微信绑定的手机号</text>
					</view>
				</view>
				<view class="b-but-box">
					<view class="colser" @click="show=false">取消</view>
					<view class="is-ok">确认</view>
					<button class="but-box" open-type="getPhoneNumber" @getphonenumber="getUserPhone"></button>
				</view>
			</view>
		</u-popup>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data(){
			return {
				show:false, //弹框
				code: '',
				isGetUserInfo: false,
				isAgree: false,
			}
		},
		onLoad () {
			this.getCode()
		},
		methods:{
			// 前往用户协议
			toAgreement: function () {
				uni.navigateTo({
					url: '/pageMember/login/agreement'
				})
			},
			// 获取code
			getCode() {
				wx.login({
					success: res => {
						console.log('code', res);
						if (res.code) {
							console.log("获取用户资料");
							this.code = res.code
						} else {
							uni.showToast({
								title:'获取用户登录状态失败！',
								icon:"error"
							})
							console.log('获取用户登录状态失败!' + res.errMsg);
						}
					}
				});
			},
			getUserProfile(){ //授权信息
				const { isAgree } = this
				if (!isAgree) {
					uni.showToast({
						title: '请阅读并同意用户协议',
						icon: 'none'
					})
					return
				}
				const parameter = {};
				wx.getUserProfile({
					desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: (res) => {
						const { code } = this
						console.log("微信基本信息：", res);
						parameter.iv = res.iv;
						parameter.encryptedData = res.encryptedData;
						parameter.code = code;
						parameter.spread_spid = uni.getStorageSync('pid') || ''
						// parameter.merId = uni.getStorageSync('merId') || ''
						this.getUserInfo(parameter);
					}
				})
			},
			getUserPhone(e){ //获取用户手机号
				console.log(e)
				const { code } = e.detail
				code && this.getPhoneNumber({ code })
			},
			getUserInfo(data){ // 获取用户信息
				const { isAgree } = this
				if (!isAgree) {
					uni.showToast({
						title: '请阅读并同意用户协议',
						icon: 'none'
					})
					return
				}
				this.$u.api.userInfoApi(data).then(res=>{
					if(res.code==1){
						console.log('用户信息：',res.data);
						uni.setStorageSync('isLogin',0);
						uni.setStorageSync('token',res.data.token);
						this.$u.api.userInfosApi({}).then(resc=>{
							if(resc.code==1){
								this.isGetUserInfo = true
								this.show = true;
							}
						});
					}
				});
			},
			getPhoneNumber(data){ //获取用户电话号码
				const { isAgree } = this
				if (!isAgree) {
					uni.showToast({
						title: '请阅读并同意用户协议',
						icon: 'none'
					})
					return
				}
				this.$u.api.getPhoneNumberApi(data).then(res=>{
					if(res.code==1){
						this.show = false;
						uni.setStorageSync('isLogin',1);
						this.$refs.uToast.show({title: '登录成功',position:'center'});
						uni.removeStorageSync('pid')
						// uni.removeStorageSync('merId')
						setTimeout(()=>{
							// uni.reLaunch({
							// 	url:'/pages/index/index'
							// })
							uni.navigateBack({
								delta: 1
							})
						},2000);
					}
				});
			},
			goReturn(){ //取消登录
				// uni.reLaunch({
				// 	url:'/pages/index/index'
				// })
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		width: 100%;
		height: 100vh;
		font-family: Microsoft YaHei;
		box-sizing: border-box;
		.top-logo-box{
			width: 100%;
			flex-direction: column;
			padding: 200rpx 0;
			padding-bottom: 400rpx;
			font-size: 36rpx;
			font-weight: bold;
			color: #000000;
			image{width: 200rpx;height: 200rpx;margin-bottom: 20rpx; border: 1rpx solid #EDEDED; border-radius: 50%;}
		}
		.bottom-but-box{
			width: 100%;
			flex-direction: column;
			.ok-login-box{
				margin-bottom: 60rpx;
				button{width: 460rpx;padding: 15rpx 0;background: #000;font-size: 32rpx;font-weight: 400;color: #FFFFFF; border-radius: 10rpx;}
			}
			.go-fh-box{
				button{width: 460rpx;padding: 15rpx 0; background: #FFF; border: 1rpx solid #000; font-size: 32rpx;font-weight: 400;color: #000; border-radius: 10rpx;}
			}
		}
		.u-popup-box{
			.t-title-box{
				border-bottom: 1rpx solid #eee;
				padding: 30rpx 0;
			}
			.c-info-box{
				width: 100%;
				padding: 30rpx 0; padding-bottom: 60rpx;
				flex-direction: column;
				border-bottom: 1rpx solid #eee;
				.t-icon-box{
					image{width: 80rpx;height: 80rpx;border-radius: 50rpx;}
				}
				.b-txt-box{
					text-align: center;
					text{display: block;}
					text:last-child{font-size: 22rpx;color: #666;font-weight: 400; margin-top: 20rpx;}
				}
			}
			.b-but-box{
				position: relative;
				width: 100%;
				height: 97rpx;
				text-align: center;
				line-height: 97rpx;
				display: flex; justify-content: space-between;
				.colser{width: 50%;border-right: 1rpx solid #eee;}
				.is-ok{width: 50%;}
				.but-box{position: absolute;z-index: 100;right: 0;width: 300rpx;height: 100%;opacity: 0;}
			}
		}
	}
	.agreement{
		display: flex;
		justify-content: center;
		margin: 60rpx 0 0 0;
		padding-bottom: 30rpx;
		align-items: center;
		image{
			width: 24rpx;
			height: 24rpx;
			margin: 0 15rpx 0 0;
		}
		.text{
			font-size: 22rpx;
			text{
				color: #2E38F6;
			}
		}
	}
</style>